<template>
	<nav-header title="企业管理" custom-nav></nav-header>
	<view>

		<view class="head">
			<view class="item">
				<uni-icons type="image" class="head-image" :size="30" color="#777" />
				<text class="head-text">成员与部门</text>
			</view>
			<view class="item">
				<uni-icons type="image" :size="30" color="#777" />
				<text class="text">新成员申请</text>
			</view>
		</view>
		<view class="info">企业信息</view>
		<view class="grid-panel">
			<view class="grid-item">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">邀请加入</text>
				</view>
			</view>
			<view class="grid-item">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">链接邀请</text>
				</view>
			</view>
			<view class="grid-item">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">邀请记录</text>
				</view>
			</view>
		</view>
		<view class="info">通讯录管理</view>
		<view class="grid-panel">
			<view class="grid-item">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">负责人设置</text>
				</view>
			</view>
			<view class="grid-item">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">角色管理</text>
				</view>
			</view>
			<view class="grid-item">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">管理员设置</text>
				</view>
			</view>
			<view class="grid-item">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">征用商友号</text>
				</view>
			</view>
		</view>
		<view class="info">企业信息</view>
		<view class="grid-panel">
			<view class="grid-item">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">企业认证</text>
				</view>
			</view>
			<view class="grid-item">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">Logo&标题</text>
				</view>
			</view>
			<view class="grid-item">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">官网绑定</text>
				</view>
			</view>
			<view class="grid-item">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">群聊设置</text>
				</view>
			</view>
			<view class="grid-item">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">聊天背景</text>
				</view>
			</view>
			<view class="grid-item">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">客户管理</text>
				</view>
			</view>
			<view class="grid-item">
				<view class="grid-item-box" style="background-color: #fff;">
					<uni-icons type="star" :size="30" color="#777" />
					<text class="text">活跃指标</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss">
	.grid-panel {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
		gap: 10px;
		padding: 10px;
		border: 1px solid #ccc;
	}

	.head {
		display: flex;
		justify-content: space-between;
		width: 100%;
		background-color: #f5f5f5;
	}

	.item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px;
		background-color: #fff;
	}

	.head-text,
	.text {
		font-size: 14px;
		margin-top: 5px;
		text-align: center;
	}

	.info {
		margin-left: 20rpx;
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}



	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
</style>